<template>
  <div class="index">
    <el-container class="clearfix">
      <el-row :gutter="10">
        <el-col :span="4" class="card" v-for="item in list" :key="item.id">
            <router-link :to="'/list/'+item.id" tag="div">
              <div class="card-img">
                <img :src="item.icon" alt="">
              </div>
              <div class="card-title">{{item.title}}</div>
            </router-link>
        </el-col>
      </el-row>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      list: []
    }
  },
  created(){
   this.getTabInfor();
  },
  methods:{
    getTabInfor: function() {
      this.$http.get(this.api.tabList).then(res=>{
        var tabInfor = res.result.itemList;
        for(var i=0;i<tabInfor.length;i++){
            var obj = tabInfor[i].data;
            this.list.push(obj)
        }
        // console.log(this.list)
      }).catch(res=>{
        alert(res)
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .el-row{
    position: fixed;
    left: 0%;
    bottom: 0;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.6);
    animation: show 1s ease;
  }
  @keyframes show {
    from{
      bottom: -100%
    }
    to{
       bottom: 0;
    }
  }
  .card{
    margin-bottom: 16px; 
  }
  .card-img{
    transition: all 1s;
  }
  .card-img:hover{
    transform: rotate(360deg);
  }
  .card-img:hover img{
    transform: scale(1.2);
    border: 6px solid rgba(54, 9, 63, 0.9);
  }
  .card-img img{
    display: block;
    margin: 0 auto;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 6px solid rgba(105, 104, 104, 0.4);
  }
  .card-title{
    font-size: 16px;
    height: 42px;
    line-height: 42px;
    text-align: center;
  }
</style>
